<template>
    <div class="shiftManagement">
        <div class="content">
            <div class="head">
                <div class="search">
                    <div>
                        <span>员工姓名:</span>
                        <el-input v-model="inpName" placeholder="请输入内容" @keyup.13.native="search()"></el-input>
                    </div>
                    <div>
                        <span>员工工号:</span>
                        <el-input v-model="inpNum" placeholder="请输入内容" @keyup.13.native="search()"></el-input>
                    </div>
                    <div>
                        <span>事件类型:</span>
                        <el-select v-model="value" :clearable="true" placeholder="全部">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="block">
                        <span class="demonstration">上报时间:</span>
                        <el-date-picker v-model="last" value-format="yyyy-MM-dd hh:mm:ss" type="datetimerange" align="right"
                            unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                </div>
                <div class="btnBox">
                    <el-button plain icon="el-icon-search" v-on:click="clickHandler" @click="search()">查询</el-button>
                    <el-button plain icon="el-icon-refresh-right" v-on:click="clickHandler"  @click="reset">重置</el-button>
                </div>
            </div>

            <el-table :data="allDutyLog" style="width: 100%" max-height="620px">
                <el-table-column prop="shift" label="序号">
                    <template slot-scope="scope">
                        {{limit * (currentPage - 1) + (scope.$index + 1)}}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="workNumber" label="工号">
                </el-table-column>
                <el-table-column prop="job" label="职务">
                </el-table-column>
                <el-table-column prop="phone" label="电话">
                </el-table-column>
                <el-table-column prop="classes" label="班次">
                </el-table-column>
                <el-table-column prop="events" label="事件类型">
                </el-table-column>
                <el-table-column prop="reportTime" label="上报时间" width="180">
                </el-table-column>
                <el-table-column label="操作">
                    <template>
                        <el-button type="text" size="small">查看详情</el-button>
                        <el-button type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[5,10,15,20]" :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
    
<script>
export default {
    data: function () {
        return {
            allDutyLog: [],
            currentPage: 1,
            limit: 5,
            total: 1,
            inpName: '',
            inpNum: '',
            options: [{
                value: '上班打卡',
                label: '上班打卡'
            }, {
                value: '下班打卡',
                label: '下班打卡'
            }, {
                value: '离岗',
                label: '离岗'
            }, {
                value: '在岗玩手机',
                label: '在岗玩手机'
            }, {
                value: '在岗睡觉',
                label: '在岗睡觉'
            }
                , {
                value: '室内吸烟',
                label: '室内吸烟'
            }],
            label: '全部',
            value: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            start: '',
            last: ''
        }
    },
    mounted: function () {
        this.getAllDutyLog();
    },
    methods: {
        clickHandler(evt) { //强制失去焦点
            let target = evt.target;
            if (target.nodeName == "SPAN") {
                target = evt.target.parentNode;
            }
            console.log(evt);
            target.blur();
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.limit = val;
            this.getAllDutyLog();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.getAllDutyLog();
        },
        getAllDutyLog: function () { //获取值班记录
            let t =new Date(this.last[0]).getTime()
            let t1 =new Date(this.last[1]).getTime()
            console.log(t,t1);
            this.$axios({
                url: `queryCondition/${this.currentPage}/${this.limit}`,
                method: 'get',
                params: {
                    name: this.inpName,
                    workNumber: this.inpNum,
                    startTime: new Date(this.last[0]).getTime(),
                    endTime: new Date(this.last[1]).getTime(),
                    events: this.value
                },
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.allDutyLog = data.data;
                    this.total = data.total;
                    console.log(data.msg);
                    console.log(this.allDutyLog);
                } else {
                    console.log(data);
                }
            })
        },
        search: function () {
            this.getAllDutyLog();
            
        },
        reset:function(){
            this.inpName='';
            this.inpNum='';
            this.value='';
            this.getAllDutyLog();
        }
    }
}
</script>
    
<style scoped lang="less">
.shiftManagement {
    width: 100%;
    height: 100%;
    min-width: 940px;
    background-color: #d9ecff;
    text-align: left;

    .content {
        margin: 1%;
        width: 96%;
        min-width: 900px;
        min-height: 545px;
        height: 92%;
        background-color: #fff;
        padding: 1%;

        .head {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .search {
                width: 80%;
                height: 60px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                div {
                    width: 200px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    &:nth-child(4) {
                        width: 275px;
                    }

                    span {
                        width: 83px;
                        font-size: 13px;
                    }

                    /deep/ .el-input__inner {
                        height: 30px;
                    }

                    /deep/ .el-select__caret,
                    .el-input__icon,
                    .el-icon-arrow-up {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    /deep/ .el-date-editor--datetimerange {
                        width: 300px;

                        .el-input__icon,
                        .el-range__icon,
                        .el-icon-time {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

                        span {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

                        .el-range-input {
                            padding-top: 2px;
                        }
                    }
                }
            }
        }


        .btnBox {
            width: 16%;
            display: flex;
            justify-content: center;
            align-items: center;

            .el-button,
            .el-button--default,
            .is-plain {
                height: 30px;
                width: 80px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            /deep/ .cell {
                text-align: center;
            }
        }

        .el-table {
            /deep/ .cell {
                text-align: center;
            }
        }

        .paginationBox {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 40px;
        }
    }
}
</style>